<template>
	<view class="container">
		<view class="info">
			<view @click="uploadClick">
				<children-head-view v-if="parentInfo.defaultBaby" size="big" :gender="parentInfo.defaultBaby.gender" :imgUrl="parentInfo.defaultBaby.imgUrl"></children-head-view>
			</view>
			<view class="more">
				<view class="name">{{parentInfo.defaultBaby.name + parentInfo.defaultBaby.relation}}</view>
				<view class="desc">{{desc}}</view>
			</view>
		</view>
		
		<view style="display: flex;flex-direction: row;">
			<view @click="menuClick(menuList[0])" style="flex: 1;display: flex;flex-direction: column;justify-content: center;" class="menu-item" :style="{'background': menuList[0].background}">
				<image class="icon" style="width: 127rpx;height: 120rpx;margin-bottom: 20rpx;" :src="menuList[0].icon"/>
				<view class="title2">
					{{menuList[0].title}}
				</view>
			</view>
			<view style="flex: 2;margin-left: 30rpx;">
				<view @click="menuClick(menuList[1])" class="menu-item" :style="{'background': menuList[1].background}">
					<image class="icon" :src="menuList[1].icon"/>
					<view class="title">
						{{menuList[1].title}}
					</view>
					<u-icon name="arrow-right" color="#A6A6A6" :size="24"></u-icon>
				</view>
				<view @click="menuClick(menuList[2])" class="menu-item" :style="{'background': menuList[2].background}">
					<image class="icon" :src="menuList[2].icon"/>
					<view class="title">
						{{menuList[2].title}}
					</view>
					<u-icon name="arrow-right" color="#A6A6A6" :size="24"></u-icon>
				</view>
			</view>
		</view>
		
		<view v-for="(item, index) in menuList" v-if="index > 2" @click="menuClick(item)" class="menu-item" :style="{'background': item.background}">
			<image class="icon" :style="{'width': index===2?'':''}" :src="item.icon"/>
			<view class="title">
				{{item.title}}
			</view>
			<u-icon name="arrow-right" color="#A6A6A6" :size="24"></u-icon>
		</view>
	</view>
</template>

<script>
	import ChildrenHeadView from '@/components/children-head-view.vue'
	import {
		mapState
	} from 'vuex';
	import {
		uploadChildren,
	} from '@/api/user.js'
	export default {
		name: 'UserParent',
		components: {
			ChildrenHeadView
		},
		data() {
			return {
				menuList: [
					{
						title: '我的服务',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu1.png',
						background: '#d8eee5',
						url: '/pages_base/charge/index',
					},
					{
						title: '宝宝信息',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu2.png',
						background: '#d9f2fd',
						url: '/pages_base/common/babylist-page',
					},
					{
						title: '实时监控',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu3.png',
						background: '#fddfd9',
						url: '/pages_base/common/camera-page',
					},
					{
						title: '家长满意度',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu4.png',
						background: '#c8eefd',
						url: '/pages_base/common/survey-page',
					},
					{
						title: '教保师评价',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu5.png',
						background: '#fef1c4',
						url: '/pages_base/common/staff-rank-page',
					},
					{
						title: '使用帮助',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu6.png',
						background: '#c8eefd'
					},
					{
						title: '设置',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu7.png',
						background: '#fef1c4',
						url: '/pages_base/common/setting-page'
					},
					{
						title: '留言',
						icon: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/parentmenu6.png',
						background: '#c8eefd',
						url: '/pages_base/common/opinion-page'
					},
				]
			}
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
				parentInfo: state => state.user.parentInfo,
			}),
			channel() {
				return getApp().globalData.channel;
			},
			
			desc () {
				if (getApp().globalData.channel === 'xm' ) {
					return '有一种放心叫奈思妈妈'
				}
				if (getApp().globalData.channel === 'xybaby' ) {
					return '紫丹幼儿园陪伴您的每一天'
				}
				return '金职托育通陪伴您的每一天'
			}
		},
		methods: {
			menuClick(item) {
				if (item.title === '使用帮助') {
					if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
						this.helpShow = true
					} else {
						let url = 'https://res.xxwbaby.com/public/agreement/parent_help.html'
						this.$u.route({
							url: 'pages_base/common/webview',
							params: {
								url: url,
								title: '使用帮助'
							}
						})
					}
				
				} else {
					this.$u.route({
						url: item.url
					})
				}
			},
			
			uploadClick() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					crop: {
						quality: 80,
						width: 600,
						height: 600,
					},
					success: function(res) {
						console.log(res)
						if (that.appType === 'app-p' || that.appType === 'mp-p') {
							that.uploadTeacherHeadImgUrl(res.tempFilePaths[0], res.tempFiles[0]);
						}
					}
				});
			},
			uploadTeacherHeadImgUrl(path, file) {
				const childrenId = this.parentInfo.defaultBabyId;
				// uni.showLoading({})
				uploadChildren(path,childrenId).then(res => {
					this.$store.commit('user/updateChildrenHeadImgUrl', res.data.imgUrl);
				})
			},
			// uploadChildrenHeadImgUrl(path, file) {
			// 	const childrenId = this.parentInfo.defaultBabyId;
			// 	let fileList = [];
			// 	fileList.push({
			// 		'file': file,
			// 	});
			// 	// uni.showLoading({})
			// 	uploadChildren(fileList, { childrenId }).then(res => {
			// 		this.$store.commit('user/updateChildrenHeadImgUrl', res.data.imgUrl);
			// 	})
			// },
		},
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow-y: scroll;
		
		.info{
			background: #fdf7e0;
			padding: 30rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.more{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				.name{
					font-size: 32rpx;
					font-weight: bold;
				}
				.desc{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}
		
		.menu-item{
			padding: 25rpx;
			border-radius: 10rpx;
			background: #fef1c4;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 30rpx;
			
			.icon{
				width: 90rpx;
				height: 90rpx;
			}
			.title{
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
				flex: 1;
			}
			.title2{
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}
			.icon-sib{
				
			}
		}
	}
</style>
